<template>
  <div>
    <Header></Header>
    <Cover :title="course.title" img="banner.png"></Cover>
    <div class="page-content">
      <div class="course-detail">
        <!-- 课程基本信息 -->
        <div class="course-header">
          <el-row :gutter="30">
            <el-col :span="16">
              <div class="course-info">
                <h1>{{ course.title }}</h1>
                <p class="course-description">{{ course.description }}</p>
                <div class="course-meta">
                  <el-tag :type="getLevelType(course.level)">{{ course.levelText }}</el-tag>
                  <span class="duration">
                    <i class="el-icon-time"></i> {{ course.duration }}
                  </span>
                  <span class="instructor">
                    <i class="el-icon-user"></i> {{ course.instructor }}
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="course-progress-card">
                <el-card>
                  <div class="progress-info">
                    <h3>学习进度</h3>
                    <el-progress
                      type="circle"
                      :percentage="course.progress"
                      :width="120"
                      :stroke-width="8"
                    ></el-progress>
                    <div class="progress-stats">
                      <p>已完成 {{ completedLessons }}/{{ totalLessons }} 课时</p>
                      <p>学习时长: {{ studiedHours }}小时</p>
                    </div>
                    <el-button
                      type="primary"
                      size="large"
                      @click="continueLearning"
                      style="width: 100%; margin-top: 15px;"
                    >
                      {{ course.progress > 0 ? '继续学习' : '开始学习' }}
                    </el-button>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 课程内容 -->
        <div class="course-content">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="课程大纲" name="outline">
              <div class="course-outline">
                <div
                  v-for="(chapter, index) in course.chapters"
                  :key="chapter.id"
                  class="chapter-item"
                >
                  <div class="chapter-header" @click="toggleChapter(index)">
                    <h4>
                      <i :class="chapter.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                      第{{ index + 1 }}章 {{ chapter.title }}
                    </h4>
                    <span class="chapter-duration">{{ chapter.duration }}</span>
                  </div>
                  <div v-show="chapter.expanded" class="chapter-lessons">
                    <div
                      v-for="lesson in chapter.lessons"
                      :key="lesson.id"
                      class="lesson-item"
                      :class="{ 'completed': lesson.completed, 'current': lesson.id === currentLessonId }"
                      @click="selectLesson(lesson)"
                    >
                      <div class="lesson-info">
                        <i :class="getLessonIcon(lesson)"></i>
                        <span class="lesson-title">{{ lesson.title }}</span>
                        <span class="lesson-duration">{{ lesson.duration }}</span>
                      </div>
                      <div class="lesson-status">
                        <i v-if="lesson.completed" class="el-icon-circle-check completed-icon"></i>
                        <i v-else-if="lesson.id === currentLessonId" class="el-icon-video-play current-icon"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="课程资料" name="materials">
              <div class="course-materials">
                <el-table :data="course.materials" style="width: 100%">
                  <el-table-column prop="name" label="资料名称" width="300">
                    <template slot-scope="scope">
                      <i :class="getFileIcon(scope.row.type)"></i>
                      {{ scope.row.name }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="类型" width="100"></el-table-column>
                  <el-table-column prop="size" label="大小" width="100"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="downloadFile(scope.row)">
                        <i class="el-icon-download"></i> 下载
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>

            <el-tab-pane label="课程讨论" name="discussion">
              <div class="course-discussion">
                <div class="discussion-form">
                  <el-input
                    type="textarea"
                    v-model="newComment"
                    placeholder="发表你的想法..."
                    :rows="3"
                  ></el-input>
                  <el-button
                    type="primary"
                    @click="addComment"
                    style="margin-top: 10px;"
                  >
                    发表评论
                  </el-button>
                </div>

                <div class="comments-list">
                  <div
                    v-for="comment in course.comments"
                    :key="comment.id"
                    class="comment-item"
                  >
                    <div class="comment-avatar">
                      <el-avatar :src="comment.avatar">{{ comment.username.charAt(0) }}</el-avatar>
                    </div>
                    <div class="comment-content">
                      <div class="comment-header">
                        <span class="username">{{ comment.username }}</span>
                        <span class="time">{{ comment.time }}</span>
                      </div>
                      <p class="comment-text">{{ comment.content }}</p>
                      <div class="comment-actions">
                        <el-button size="mini" type="text">
                          <i class="el-icon-thumb"></i> 点赞 ({{ comment.likes }})
                        </el-button>
                        <el-button size="mini" type="text">
                          <i class="el-icon-chat-line-round"></i> 回复
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
export default {
  name: 'CourseDetail',
  components: {
    Header: () => import("@/components/Header.vue"),
    Cover: () => import('@/components/Cover.vue'),
    Footer: () => import("@/components/Footer.vue")
  },
  data() {
    return {
      activeTab: 'outline',
      currentLessonId: 2,
      newComment: '',
      course: {
        id: 1,
        title: 'Vue.js 基础教程',
        description: '从零开始学习Vue.js框架，掌握现代前端开发技能。本课程将带你深入了解Vue.js的核心概念，包括组件、指令、路由、状态管理等内容。',
        instructor: '张老师',
        duration: '20小时',
        level: 'beginner',
        levelText: '初级',
        progress: 35,
        chapters: [
          {
            id: 1,
            title: 'Vue.js 入门',
            duration: '2小时',
            expanded: true,
            lessons: [
              { id: 1, title: 'Vue.js 简介', duration: '15分钟', type: 'video', completed: true },
              { id: 2, title: '环境搭建', duration: '20分钟', type: 'video', completed: false },
              { id: 3, title: '第一个Vue应用', duration: '25分钟', type: 'video', completed: false }
            ]
          },
          {
            id: 2,
            title: 'Vue.js 基础语法',
            duration: '4小时',
            expanded: false,
            lessons: [
              { id: 4, title: '模板语法', duration: '30分钟', type: 'video', completed: false },
              { id: 5, title: '数据绑定', duration: '35分钟', type: 'video', completed: false },
              { id: 6, title: '事件处理', duration: '40分钟', type: 'video', completed: false }
            ]
          }
        ],
        materials: [
          { id: 1, name: 'Vue.js官方文档.pdf', type: 'PDF', size: '2.5MB' },
          { id: 2, name: '课程源码.zip', type: 'ZIP', size: '15MB' },
          { id: 3, name: '练习题.docx', type: 'Word', size: '1.2MB' }
        ],
        comments: [
          {
            id: 1,
            username: '学习者A',
            avatar: '',
            content: '这个课程讲得很清楚，老师的讲解很详细！',
            time: '2024-01-20 14:30',
            likes: 5
          },
          {
            id: 2,
            username: '前端新手',
            avatar: '',
            content: '作为初学者，这个课程对我帮助很大，推荐给大家！',
            time: '2024-01-19 16:45',
            likes: 3
          }
        ]
      }
    };
  },
  computed: {
    totalLessons() {
      return this.course.chapters.reduce((total, chapter) => total + chapter.lessons.length, 0);
    },
    completedLessons() {
      return this.course.chapters.reduce((total, chapter) =>
        total + chapter.lessons.filter(lesson => lesson.completed).length, 0
      );
    },
    studiedHours() {
      return Math.floor(this.course.progress * 20 / 100);
    }
  },
  methods: {
    getLevelType(level) {
      const typeMap = {
        'beginner': 'success',
        'intermediate': 'warning',
        'advanced': 'danger'
      };
      return typeMap[level] || 'info';
    },

    toggleChapter(index) {
      this.course.chapters[index].expanded = !this.course.chapters[index].expanded;
    },

    selectLesson(lesson) {
      this.currentLessonId = lesson.id;
      this.$message.success(`开始学习: ${lesson.title}`);
    },

    getLessonIcon(lesson) {
      const iconMap = {
        'video': 'el-icon-video-play',
        'text': 'el-icon-document',
        'quiz': 'el-icon-edit-outline'
      };
      return iconMap[lesson.type] || 'el-icon-document';
    },

    getFileIcon(type) {
      const iconMap = {
        'PDF': 'el-icon-document',
        'Word': 'el-icon-edit-outline',
        'ZIP': 'el-icon-folder-opened'
      };
      return iconMap[type] || 'el-icon-document';
    },

    continueLearning() {
      this.$message.success('开始学习课程');
      // 这里可以跳转到视频播放页面
    },

    downloadFile(file) {
      this.$message.success(`开始下载: ${file.name}`);
    },

    addComment() {
      if (!this.newComment.trim()) {
        this.$message.warning('请输入评论内容');
        return;
      }

      const comment = {
        id: this.course.comments.length + 1,
        username: '当前用户',
        avatar: '',
        content: this.newComment,
        time: new Date().toLocaleString(),
        likes: 0
      };

      this.course.comments.unshift(comment);
      this.newComment = '';
      this.$message.success('评论发表成功');
    }
  }
};
</script>

<style lang="less" scoped>
.page-content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.course-detail {
  .course-header {
    margin-bottom: 30px;

    .course-info {
      h1 {
        margin: 0 0 15px 0;
        color: #303133;
        font-size: 28px;
        font-weight: 600;
      }

      .course-description {
        color: #606266;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .course-meta {
        display: flex;
        align-items: center;
        gap: 20px;

        .duration, .instructor {
          color: #909399;
          font-size: 14px;

          i {
            margin-right: 5px;
          }
        }
      }
    }

    .course-progress-card {
      .progress-info {
        text-align: center;

        h3 {
          margin: 0 0 20px 0;
          color: #303133;
        }

        .progress-stats {
          margin-top: 15px;

          p {
            margin: 5px 0;
            color: #606266;
            font-size: 14px;
          }
        }
      }
    }
  }

  .course-content {
    .course-outline {
      .chapter-item {
        border: 1px solid #EBEEF5;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;

        .chapter-header {
          padding: 15px 20px;
          background: #F5F7FA;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: background-color 0.3s;

          &:hover {
            background: #E4E7ED;
          }

          h4 {
            margin: 0;
            color: #303133;
            font-size: 16px;

            i {
              margin-right: 8px;
              transition: transform 0.3s;
            }
          }

          .chapter-duration {
            color: #909399;
            font-size: 14px;
          }
        }

        .chapter-lessons {
          .lesson-item {
            padding: 12px 20px;
            border-top: 1px solid #EBEEF5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
              background: #F5F7FA;
            }

            &.completed {
              background: #F0F9FF;

              .lesson-title {
                color: #67C23A;
              }
            }

            &.current {
              background: #E6F7FF;
              border-left: 3px solid #409EFF;
            }

            .lesson-info {
              display: flex;
              align-items: center;
              gap: 10px;

              i {
                color: #909399;
              }

              .lesson-title {
                color: #303133;
                font-size: 14px;
              }

              .lesson-duration {
                color: #909399;
                font-size: 12px;
              }
            }

            .lesson-status {
              .completed-icon {
                color: #67C23A;
                font-size: 18px;
              }

              .current-icon {
                color: #409EFF;
                font-size: 18px;
              }
            }
          }
        }
      }
    }

    .course-materials {
      .el-table {
        border-radius: 8px;
        overflow: hidden;
      }
    }

    .course-discussion {
      .discussion-form {
        margin-bottom: 30px;
        padding: 20px;
        background: #F5F7FA;
        border-radius: 8px;
      }

      .comments-list {
        .comment-item {
          display: flex;
          padding: 20px 0;
          border-bottom: 1px solid #EBEEF5;

          &:last-child {
            border-bottom: none;
          }

          .comment-avatar {
            margin-right: 15px;
          }

          .comment-content {
            flex: 1;

            .comment-header {
              display: flex;
              align-items: center;
              gap: 15px;
              margin-bottom: 8px;

              .username {
                font-weight: 600;
                color: #303133;
              }

              .time {
                color: #909399;
                font-size: 12px;
              }
            }

            .comment-text {
              color: #606266;
              line-height: 1.6;
              margin: 0 0 10px 0;
            }

            .comment-actions {
              .el-button {
                padding: 0;
                margin-right: 15px;
                color: #909399;

                &:hover {
                  color: #409EFF;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-content {
    padding: 10px;
  }

  .course-header {
    .el-col {
      margin-bottom: 20px;
    }
  }

  .course-info {
    h1 {
      font-size: 24px;
    }

    .course-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }
}
</style>
